<template>
  <div>
    <ul class="TOP">
      <li>学校</li>
      <li>姓名</li>
      <li>电话</li>
      <li>邮箱</li>
      <li class="rz">认证情况</li>
    </ul>

    <input type="text" v-model="good.school" />
    <input type="text" v-model="good.username" />
    <input type="text" v-model="good.phone" />
    <input type="text" v-model="good.email" />
    <input type="text" v-model="good.att" />
    <button @click="add">添加</button>

    <table class="aat" border="1">
      <tr
        v-for="(item, index) in good_list"
        :key="index"
        :class="index == changeNum ? 'active button' : 'button'"
        @click="change(index)"
      >
        <td>{{ item.school }}</td>
        <td class="name">{{ item.username }}</td>
        <td>{{ item.phone }}</td>
        <td>{{ item.email }}</td>
        <td :class="item.att == '已认证' ? 'true' : 'false'">{{ item.att }}</td>
        <button class="sc" @click="del(index)">删除</button>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      changeNum: 0,
      good: {
        school: "",
        username: "",
        snb: "",
        phone: "",
        email: "",
        att: "",
      },
      good_list: [
        {
          school: "中公教育",
          username: "张三",
 
          phone: "13021495933",
          email: "1012143373@qq.com",
          att: "已认证",
        },
        {
          school: "中公教育",
          username: "李四",
   
          phone: "13021495933",
          email: "123143373@qq.com",
          att: "未认证",
        },
        {
          school: "中公教育",
          username: "王五",
       
          phone: "13021495933",
          email: "101235433373@qq.com",
          att: "已认证",
        },
        {
          school: "中公教育",
          username: "宋六",
    
          phone: "13021495933",
          email: "10121663373@qq.com",
          att: "已认证",
        },
        {
          school: "中公教育",
          username: "小柒",
   
          phone: "13021495933",
          email: "1012163798@qq.com",
          att: "未认证",
        },
        {
          school: "中公教育",
          username: "老八",
  
          phone: "13021492933",
          email: "1012163438@qq.com",
          att: "未认证",
        },
      ],
    };
  },
  methods: {
    change(i) {
      this.changeNum = i;
    },
    add() {
      if (this.good.school.trim() === "") {
        return alert("学校不能为空");
      }
      if (this.good.username.trim() === "") {
        return alert("姓名不能为空");
      }
      if (this.good.phone.trim() === "") {
        return alert("电话不能为空");
      }
      if (this.good.email.trim() === "") {
        return alert("邮箱不能为空");
      }
      if (this.good.att.trim() === "") {
        return alert("认证情况不能为空");
      }
      var obj = {
        "school": this.good.school,
        "username": this.good.username,
        "snb": this.good.snb,
        "phone": this.good.phone,
        "email": this.good.email,
        "att": this.good.att,
      };
      this.good_list.push(obj);
      this.good={
        school: "",
        username: "",
        snb:"",
        phone: "",
        email: "",
        att:"",
      }
    },
    del(index){
      this.good_list.splice(index,1)
    }
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.aat {
  width: 1165px;
  background: rgb(217, 219, 219);
  border-collapse: collapse;
  border-color: transparent;
}
.TOP {
  width: 1165px;
  height: 70px;
  line-height: 70px;
  background: #fff;
}
.TOP .rz {
  margin-left: 80px;
}

.TOP li {
  margin-left: 80px;
  width: 132px;
  float: left;
  list-style: none;
}
.aat tr {
  height: 60px;
  line-height: 60px;
  cursor: pointer;
}
.aat .button td {
  text-align: center;
  width: 209px;
}
.aat .button.active {
  background-color: rgb(199, 183, 183);
}
td.true {
  color: green;
}
td.false {
  color: red;
}
input {
  width: 210px;
  height: 30px;
  outline: none;
  box-sizing: border-box;
  vertical-align: center;
}
button {
  width: 100px;
  height: 30px;
  font-size: 20px;
  outline: none;
  vertical-align: top;
  background: green;
  color:#fff;
}
.sc{
  background: red;
  color: #fff;
  margin-top: 15px;
}

</style>